<section class="panel">
    <header class="panel-heading">
        图片列表
    </header>
    <table class="table table-striped table-advance table-hover">
        <thead>
        <tr>
            <th colspan="5"> <a href="index.html">根目录</a>
            <% for(var i = 0; i < param.pathlist.length; i++){ %>
                &gt; <a href="index.html?path=<%= param.pathlist[i].path %>"> <%= param.pathlist[i].name %> </a>
            <% } %>
            <%
                var len = param.pathlist.length - 1;
                var rootPath = param.pathlist[len] && param.pathlist[len].path || "";
            %>
            <button type="button" class="btn btn-primary btn-xs" onclick="showAddFoler('<%=rootPath%>')">+</button>
            </th>
        </tr>
        </thead>
        <tbody>
        <%
            for(var i = 0; i < data.length; i+=5) {
        %>
            <tr>
            <% for(var j = 0; j < 5; j++) { 
                var item = data[i+j]; 
                if(!item){ continue;}
            %>
                
                <td width="20%" align="center">
                    <% if(item.type=="folder") { %>
                    <a href="index.html?path=<%= item.path %>">
                    <img src="<%=constant.STATIC_PATH%>/theme/<%= constant.SelectTheme %>/images/icon-folder-close.png" width="64" alt="folder" />
                    </a>
                    <br />
                    <a href="index.html?path=<%= item.path %>">  <%= item.filename %> </a>
                    <% if(username == "admin") { %> 
                    <a href="#" onclick="deleteFolder('<%= item.path %>')" title="删除"><i class="fa fa-close text-danger"></i></a>
                    <% } %>
                    <% } else if(item.type=="image") { %>
                    <a href="#" onclick="showImagePreview('<%= item.path %>')">
                    <img src="<%=constant.STATIC_PATH%>/theme/<%= constant.SelectTheme %>/images/icon-picture.png" width="64" alt="image" />
                    </a>
                    <br />
                    <a href="#" onclick="showImagePreview('<%= item.path %>')"> <%= item.filename %> </a>
                    <% if(username == "admin") { %> 
                    <a href="#" onclick="deleteFile('<%= item.path %>')" title="删除"><i class="fa fa-close text-danger"></i></a>
                    <% } %>
                    <% } else { %>
                    <img src="<%=constant.STATIC_PATH%>/theme/<%= constant.SelectTheme %>/images/icon-file.png" width="64" alt="other" />
                    <br />
                    <%= item.filename %> 
                    <% if(username == "admin") { %> 
                    <a href="#" onclick="deleteFile('<%= item.path %>')" title="删除" ><i class="fa fa-close text-danger"></i></a>
                    <% } %>
                    <% } %>

                    
                </td>
            <% } %>
            </tr>
        <%    
            }
        %>
        </tbody>
    </table>

    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">×</span>
                        </button>
                        <h4 class="modal-title" id="myModalLabel"></h4>
                    </div>
                    <div class="modal-body" id="modal-content">
                        
                    </div>
                    <div class="modal-footer">

                        <input type="hidden" id="parentPathValue" value="" />
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary" id="btnSave" onclick="submitAddFolder()">保存</button>
                        <button type="button" class="btn btn-danger" id="btnDelete" onclick="submitDelete()" style="display:none">删除</button>
                        <input type="hidden" id="deletePath" value="" />
                        <input type="hidden" id="isFolder" value="" />
                    </div>
                </div>
            </div>
        </div>
</section>
<%
    var urlparam = "?";
    if(param.extrapath && param.extrapath.length > 0){
        urlparam = "index.html?path="+param.extrapath+"&";                
    }
%>
<%- include("pager-part", {"pagerInfo":pager, "urlparam":urlparam}) %>
<%- include("../jspart/with-toast") %>
<script type="text/javascript">
    function showImagePreview(imageurl){
        $("#modal-content").html("<img style='max-width: 100%;' src='showpic?path="+imageurl+"' alt='' />");
        $("#myModalLabel").html("图片预览");
        $("#btnSave").hide();
        $("#btnDelete").hide();
        $("#myModal").modal();
    }
    function showAddFoler(parentPath){
        $("#parentPathValue").val(parentPath);
        if(parentPath == ""){
            parentPath = "根目录";
        }
        var strHtml = "  <div class=\"row\">   <div class=\"form-group\">    <label class=\"col-sm-4 control-label\">文件夹名称</label> <div class=\"col-sm-8\">";
        strHtml += " <input class=\"form-control\" id=\"newFolderName\" /> ";
        strHtml += " </div>  </div>  </div>";

        strHtml += "  <div class=\"row\">   <div class=\"form-group\">    <label class=\"col-sm-4 control-label\">上一级</label> <div class=\"col-sm-8\">";
        strHtml += parentPath;
        strHtml += " </div>  </div>  </div>";
        $("#modal-content").html(strHtml);
        $("#myModalLabel").html("创建文件夹");
        $("#btnSave").show();
        $("#btnDelete").hide();
        $("#myModal").modal();
    }
    function submitAddFolder(){
        let parent = $("#parentPathValue").val();
        let dirname = $("#newFolderName").val();
        if(dirname.length <= 0){
            showErrorToast("请输入文件夹名称");
            return;
        }
        $.post('/ajax/addfolder',{"parent":parent, "dirname":dirname},function(data){
            if(data.success){
                window.location.href='index.html?path='+parent+'/'+dirname;
            }else{
                showErrorToast(data.error);
            }
        })
    }
<% if(username == "admin") { %> 
    function deleteFile(path){
        showDeleteConfirm(path, false);
        
    }
    function deleteFolder(path){
        showDeleteConfirm(path, true);
    }
    function submitDelete(){
        var confirmStr = $("#txtConfirm").val();
        if(confirmStr !== "OK"){
            showErrorToast("必须输入OK才能删除");
            return;
        }
        var path = $("#deletePath").val();
        var isfolder = $("#isFolder").val() == "文件夹";
        $.post('/ajax/deletefile',{"path":path, "isdir":isfolder},function(data){
            if(data.success){
                window.location.href = window.location.href;
            }else{
                showErrorToast(data.error);
            }
        })
    }

    function showDeleteConfirm(path, isfolder){
        $("#deletePath").val(path);
        var strFolder = isfolder ? "文件夹" : "文件";
        $("#isFolder").val(strFolder);
        
        var strHtml = "  <div class=\"row\">   <div class=\"form-group\">    <label class=\"col-sm-4 control-label\">输入OK确定</label> <div class=\"col-sm-8\">";
        strHtml += " <input class=\"form-control\" id=\"txtConfirm\" /> ";
        strHtml += " </div>  </div>  </div>";

        strHtml += "  <div class=\"row\">   <div class=\"form-group\">    <label class=\"col-sm-4 control-label\">删除</label> <div class=\"col-sm-8\">";
        strHtml += strFolder+"<span class=\"text-danger\">" + path+"</span>";
        strHtml += " </div>  </div>  </div>";
        $("#modal-content").html(strHtml);
        $("#myModalLabel").html("删除确认");
        $("#btnSave").hide();
        $("#btnDelete").show();
        $("#myModal").modal();
    }
<%}%>
</script>